<script setup lang="ts">
import {reactive} from "vue";
import {userStore} from "@/store/modules/User.ts";
import router from "../../../routers";
import {ElNotification} from 'element-plus';

let user = userStore();
let login_data = reactive({username: '', password: ''});
const login = () => {
    // user.login(login_data)
    //post请求
    if (login_data.username == "admin" && login_data.password == "admin") {
        router.push("/home")
        user.login(login_data)
        ElNotification({message: "欢迎回来，" + getTimePeriod() + "好！", title: "登录成功！", type: "success"})
    } else {
        ElNotification({message: "请重新登录！", title: "登录失败！", type: "error"})
    }

};

const rules = {
    username: [
        {required: true, message: '请输入用户名！', trigger: 'blur'},
    ],
    password: [
        {required: true, message: '请输入密码！', trigger: 'blur'},
    ]
};

const getTimePeriod = (): string => {
    const hour = new Date().getHours();
    if (hour >= 0 && hour < 6) {
        return "凌晨";
    } else if (hour >= 6 && hour < 9) {
        return "早上";
    } else if (hour >= 9 && hour < 12) {
        return "上午";
    } else if (hour >= 12 && hour < 14) {
        return "中午";
    } else if (hour >= 14 && hour < 18) {
        return "下午";
    } else if (hour >= 18 && hour < 24) {
        return "晚上";
    } else {
        return "你";
    }
};

</script>

<template>
    <div class="box">
        <el-row>
            <el-col :span="13" :xs="0"></el-col>
            <el-col :span="11" :xs="24">

                <el-form class="login_form"
                         :model="login_data"
                         :rules="rules">
                    <h1>Hello</h1>
                    <h2>欢迎来到Harry甄选，{{ getTimePeriod() }}好！</h2>
                    <el-form-item prop="username" :rules="rules" class="input_username">
                        <el-input type="text" placeholder="用户名" clearable size="large"
                                  v-model="login_data.username">
                            <template #prefix>
                                <el-icon>
                                    <User/>
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" class="input_password">
                        <el-input type="password" placeholder="密码" show-password size="large"
                                  v-model="login_data.password">
                            <template #prefix>
                                <el-icon>
                                    <Lock/>
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" size="large" class="login_but" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped lang="less">
.box {
    width: 100%;
    height: 100vh;
    background: url("src/assets/images/login.jpg") no-repeat;
    background-size: cover;

    .login_form {
        width: 60%;
        position: relative;
        top: 20vh;

        padding: 30px;
        border-radius: 20px;
        backdrop-filter: blur(10px) brightness(0.8) grayscale(0.5);

        h1 {
            color: white;
            margin-bottom: 10px;
        }

        h2 {
            color: white;
            margin-bottom: 20px;
            font-weight: normal;
        }

        .input_username {
            margin-bottom: 20px;
        }

        .input_password {
            margin-bottom: 30px;
        }

        .login_but {
            width: 100%;
        }
    }
}
</style>
